String Variables in Figma are reusable variables used to store text-based values such as names, labels, messages, font names, font weights, component states, and localized content. They help designers create flexible and scalable design systems where text can be changed from a single variable instead of manually editing multiple layers.
String variables can be especially useful for localization, typography, component variants, prototyping, dynamic content, and design-system management. Figma supports String as one of its variable types, and string variables can be applied to text content, font properties, variant instances, and other supported string values.
Learn professional Figma design and advanced workflows with JustAcademy Figma Training and explore the Register for Figma Course Demo.
A String Variable is a reusable Figma variable that stores a sequence of characters. A string can contain words, sentences, numbers represented as text, symbols, labels, names, or other textual information.
For example, a String Variable can store:
When the variable is applied to a supported property, changing its value can update the associated design automatically.
Variable Name: welcomeMessage
Variable Type: String
Value: Welcome to Figma
If this variable is connected to a text layer, the text layer displays:
Welcome to FigmaIf the value is changed to Welcome to Our App, the connected text can update to the new value.
String variables reduce repetitive text editing and make designs easier to maintain. Instead of changing the same text manually across many screens, designers can update the variable value and reuse it wherever required.
| Normal Text | String Variable |
|---|---|
| Stored directly in a text layer | Stored as a reusable variable |
| Usually edited individually | Can be reused across multiple designs |
| Difficult to update globally | Easier to maintain centrally |
| Limited dynamic behavior | Can be used in variables and prototypes |
| Useful for static content | Useful for scalable systems and dynamic content |
pageTitle = "Dashboard"
buttonText = "Continue"
userName = "Rahul"
language = "English"
fontFamily = "Inter"
fontWeight = "Regular"
status = "Active"
errorMessage = "Invalid email address"
These values can be reused throughout a design system or prototype.
Figma's Variables view provides the interface for creating and managing variable collections, variables, modes, and groups.
Collection
└── String Variables
├── text/title
├── text/subtitle
├── text/button
├── text/error
└── text/success
Organizing variables into logical groups makes large design systems easier to manage.
Good naming is important because variable names communicate their purpose to designers and developers.
text/button/primary
text/button/secondary
text/title/page
text/error/required
text/success/message
content/login/title
content/login/button
text1
abc
newText
test
variable123
Use descriptive and consistent names instead of generic names.
One of the most common uses of String Variables is controlling the content of text layers.
For example:
Variable: loginTitle
Value: Welcome Back
Apply loginTitle to a text layer and the layer displays the variable value.
Figma allows String Variables to be applied to the text content of text layers.
For example:
String Variable:
pageTitle = "My Dashboard"
Text Layer:
[pageTitle]
Suppose the variable contains:
pageTitle = "Dashboard"You can change the value to:
pageTitle = "Analytics Dashboard"Any supported design element using that variable can reflect the updated value.
String Variables are useful for reusable button labels.
primaryButton = "Continue"
secondaryButton = "Cancel"
submitButton = "Submit"
loginButton = "Login"
Instead of manually entering button labels repeatedly, these values can be managed through variables.
Navigation menus often contain repeated text across multiple screens.
navHome = "Home"
navProducts = "Products"
navOrders = "Orders"
navProfile = "Profile"
navSettings = "Settings"
Using variables helps keep navigation labels consistent throughout the design.
Error messages can also be stored as reusable variables.
errorRequired = "This field is required"
errorEmail = "Enter a valid email address"
errorPassword = "Password must be at least 8 characters"
This approach makes repeated validation messages easier to maintain.
successMessage = "Your account has been created successfully"
paymentSuccess = "Payment completed successfully"
profileUpdated = "Profile updated successfully"
These values can be reused across confirmation screens, notifications, dialogs, and prototypes.
Forms often contain placeholder text such as:
Enter your name
Enter your email
Enter your password
Search products...
These values can be stored as String Variables to keep form designs consistent.
Localization is one of the most powerful uses of String Variables. A design can use different values for different languages through variable modes.
Variable: loginTitle
English:
"Welcome Back"
Hindi:
"वापसी पर स्वागत है"
Spanish:
"Bienvenido de nuevo"
Figma's variable modes can represent different contexts, including localized UI copy, allowing designers to preview how text flows in different languages.
A String Variable can have different values across modes. This is useful when the same interface needs different content depending on context.
| Variable | English | Hindi |
|---|---|---|
| loginTitle | Welcome Back | वापसी पर स्वागत है |
| loginButton | Login | लॉग इन |
| forgotPassword | Forgot Password? | पासवर्ड भूल गए? |
Figma String Variables can be applied to font properties such as font family.
fontFamily = "Inter"Other examples include:
fontFamily = "Roboto"
fontFamily = "DM Sans"
fontFamily = "Poppins"
Using a String Variable for font family can help standardize typography in a design system.
String Variables can also represent font weight or style names where supported.
fontWeight = "Regular"
fontWeight = "Medium"
fontWeight = "Bold"
Figma recommends using the exact spelling of font family and font style or weight values when applying them as String Variables.
String Variables can be mapped to component variant properties when the variable values match the variant property values.
For example, suppose a button component has these variants:
State = Default
State = Hover
State = Disabled
Create a String Variable:
buttonState = "Default"The variable can be connected to the matching variant property.
| Variable Value | Button Variant |
|---|---|
| Default | Default |
| Hover | Hover |
| Disabled | Disabled |
| Loading | Loading |
The string value must match the corresponding variant property value for the mapping to work correctly.
String Variables are useful for representing multiple component states.
inputState = "Default"
inputState = "Focused"
inputState = "Error"
inputState = "Success"
inputState = "Disabled"
This allows a component's variant to respond to a variable value.
An e-commerce design can use String Variables for product information and UI messages.
productName = "Wireless Headphones"
productCategory = "Electronics"
productStatus = "In Stock"
cartButton = "Add to Cart"
checkoutButton = "Proceed to Checkout"
userName = "Amit Sharma"
userRole = "Designer"
userStatus = "Active"
userLocation = "Mumbai"
These values can be used in profile cards, dashboards, account pages, and prototypes.
String Variables can store and update text values during prototyping. Figma's variable prototyping features allow interactions to modify variable values, which can change the content displayed in a design.
profileName = "Amit"An interaction can update the variable:
profileName = "Rahul"The connected text can then display the updated value.
The Set variable action can be used in prototypes to modify a String Variable after an interaction.
Variable:
userName = "Amit"
Text:
"Welcome, " + userName
The resulting message can be:
Welcome, AmitWhen the variable changes:
userName = "Rahul"The message can become:
Welcome, RahulString expressions can be used to combine string values. For example, a greeting can combine a fixed string with a String Variable.
"Welcome back, " + userNameIf userName contains "Amit", the result becomes:
Welcome back, AmitThe + operator can be used for string concatenation in supported Figma prototype expressions.
Search interfaces can use String Variables for search terms, placeholder content, and result messages.
searchPlaceholder = "Search products..."
searchQuery = "Laptop"
searchResult = "24 products found"
notificationTitle = "New Message"
notificationBody = "You have received a new message."
notificationAction = "View Message"
These values can be reused across notification components and prototype screens.
emptyTitle = "No Products Found"
emptyDescription = "Try changing your search criteria."
emptyAction = "Clear Filters"
This creates a consistent empty-state experience across an application.
String Variables can become part of a larger design-token system. They can represent standardized content, typography values, component states, and other reusable text-based values.
Text
├── Button
│ ├── Primary
│ └── Secondary
├── Form
│ ├── Error
│ └── Placeholder
└── Navigation
├── Home
├── Products
└── Profile
Groups help organize variables inside a collection.
Content
├── Navigation
├── Buttons
├── Forms
├── Messages
└── Notifications
For a large design system, logical grouping makes it easier to locate the correct variable.
A variable collection can contain multiple String Variables.
Collection: Content
String Variables:
- content/title
- content/subtitle
- content/button
- content/error
- content/success
Collections provide a structured place to manage variables and their modes.
| String Variable | Boolean Variable |
|---|---|
| Stores text values | Stores true or false |
| Useful for labels and content | Useful for visibility and binary states |
| Example: "Login" | Example: true |
| Can support localization | Can control show/hide behavior |
| String | Number |
|---|---|
| "100" | 100 |
| Text-based value | Numeric value |
| Useful for text content | Useful for dimensions and calculations |
| Can represent names and messages | Can represent spacing and sizes |
String Variables and text component properties can both manage text, but they solve different problems.
| String Variable | Text Property |
|---|---|
| Reusable variable value | Component-specific property |
| Can be used across designs | Primarily controls component content |
| Supports variable modes | Useful for customizing component instances |
| Useful for design tokens and dynamic prototypes | Useful for reusable component content |
Create a login screen using String Variables.
loginTitle = "Welcome Back"
emailPlaceholder = "Enter your email"
passwordPlaceholder = "Enter your password"
loginButton = "Login"
forgotPassword = "Forgot Password?"
Create additional modes for other languages and provide translated values for the same variables.
userName = "Amit Sharma"
userRole = "UI/UX Designer"
userStatus = "Available"
profileAction = "Edit Profile"
Apply these variables to the appropriate text layers and use prototype interactions to change values where required.
checkoutTitle = "Checkout"
shippingTitle = "Shipping Address"
paymentTitle = "Payment Method"
placeOrder = "Place Order"
successMessage = "Order placed successfully"
These variables can help maintain consistent checkout terminology across multiple screens.
Create a button component with variants such as:
Default
Hover
Loading
Success
Disabled
Create a String Variable:
buttonState = "Default"Map the variable to the appropriate variant property and ensure the variable values exactly match the variant values.
String Variables do not directly control responsive dimensions like Number Variables do, but they can help designers test how different text lengths affect responsive layouts.
For example:
Short:
"Save"
Medium:
"Save Changes"
Long:
"Save Changes and Continue"
This is useful for checking whether buttons, cards, navigation items, and responsive layouts can accommodate different content lengths.
Different languages can require significantly different amounts of space. String Variable modes allow designers to test localized content inside the same design.
English:
"Continue"
German:
"Weiter"
French:
"Continuer"
Hindi:
"जारी रखें"
This helps identify text overflow, wrapping, alignment, and layout problems before development.
String Variables can be used for supported font properties such as font family and font style or weight names.
fontFamily = "Inter"
fontStyle = "Regular"
This can help standardize typography values across a design system.
String Variables can provide useful context during developer handoff. Developers inspecting designs can see variable information in Dev Mode, including the variable name, collection, mode, value, scope, and available code information where applicable.
Using meaningful names makes the relationship between design values and implementation easier to understand.
Figma allows variable code syntax to represent variables in code for supported handoff workflows. For example, a variable can have a CSS representation.
Variable:
text/button/primary
Possible CSS representation:
var(--text-button-primary)
The exact syntax depends on how the variable is configured for developer handoff.
When inspecting designs in Dev Mode, developers can encounter String Variables used by the design. Variable details can show information such as the variable name, collection, mode, value, scope, and code representation.
This helps developers understand which reusable design value is being used instead of treating every displayed text or typography value as an isolated value.
content/title
content/subtitle
content/body
content/button
content/error
content/success
navigation/home
navigation/products
navigation/profile
form/placeholder
form/error
typography/font-family
typography/font-weight
component/button/state
Choose one naming convention and use it consistently across the project.
Identify Reusable Text
↓
Create Variable Collection
↓
Create String Variable
↓
Give Meaningful Name
↓
Add Default Value
↓
Create Additional Modes if Required
↓
Apply Variable to Text / Font / Variant
↓
Test Different Values
↓
Test Localization
↓
Prototype Dynamic Behavior
↓
Review in Dev Mode
↓
Publish and Maintain Design System
| Feature | Purpose |
|---|---|
| String Variable | Stores reusable text values |
| Text Content | Controls text layer content |
| Font Family | Stores supported font family values |
| Font Weight/Style | Stores supported font style or weight names |
| Modes | Stores different values for different contexts |
| Localization | Supports multilingual content testing |
| Component Variants | Can switch variants when values match variant properties |
| Prototyping | Can update text dynamically using interactions |
| Expressions | Can combine supported string values |
| Dev Mode | Helps developers inspect variable information |
A String Variable is a reusable variable that stores a sequence of characters and can be applied to supported text-based properties.
They can be used for text content, supported font properties, component variant properties, prototypes, and other supported string values.
They allow the same design to use different text values for different languages, especially when combined with variable modes.
Yes. String Variables can be mapped to variant properties when their values match the variant property values.
Yes. Supported prototype interactions can use the Set variable action to update String Variable values.
Normal text is directly stored in a text layer, while a String Variable stores a reusable value that can be applied in multiple supported locations.
Clear names make variables easier to find, understand, reuse, maintain, and hand off to developers.
Yes. Variable modes can store different values for the same variable depending on the design context.
Yes. Figma supports String Variables for font family and font style or weight names in supported contexts.
They centralize reusable text and supported string-based values, reduce duplication, improve consistency, and make contextual changes easier to manage.
String Variables are an important part of building scalable and maintainable Figma designs. They allow designers to store reusable text values and apply them across text layers, typography properties, component variants, localized designs, and interactive prototypes.
When combined with collections, groups, modes, components, and prototyping features, String Variables can significantly improve the flexibility and consistency of a design system. They are especially valuable for multilingual interfaces, reusable components, dynamic prototypes, and developer handoff.
To learn Figma from fundamentals through advanced professional workflows, visit JustAcademy Figma Training or Register for Figma Course Demo.
